<template>
	<view>
		<view class="content">
			<view class="title">
				欢迎注册三立
			</view>
			<view class="center">
				<view class="tel item">
					<view class="left">
						昵称
					</view>
					<input v-model="telData.nicheng" class="uni-input" focus placeholder="昵称" maxlength="11" />

				</view>
				<view class="p"></view>
				<view class="tel item">
					<view class="left">
						电话
					</view>
					<input v-model="telData.tel" class="uni-input" focus placeholder="电话" maxlength="11" />

				</view>
				<view class="p">
				</view>
				<view class="password item">
					<view class="left">
						密码
					</view>
					<input v-model="telData.password" class="uni-input" focus placeholder="密码" />
				</view>
				<view class="p">

				</view>
				<view class="password item">
					<view class="left">
						确认密码
					</view>
					<input v-model="telData.checkpassword" class="uni-input" focus placeholder="确认密码" />
				</view>
				<view class="p">

				</view>

			</view>
			<view class="bottom">
				<view class="title2">
					<checkbox @click="clickCheck()"></checkbox>确认同意<p class="p" @click="gotoXieyi(0)">隐私政策</p>和<p
						class="p" @click="gotoXieyi(1)">场馆入驻协议</p>
				</view>
				<view class="login-btn" @click="regUser()">
					注册
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		regUserApi
	} from '../../../api/reguser.js'

	import {
		reactive,
		ref
	} from 'vue';

	import {
		onLoad
	} from '@dcloudio/uni-app'


	// 跳转协议
	const gotoXieyi = (id) => {
		if (id == 0) {
			// 隐私跳转
			uni.navigateTo({
				url: `/views/changuanruzhu/webview/view-yinsi-view?url=https://sanlimessage.fun/privacy_policy`
			})
		} else if (id == 1) {
			// 规则跳转
			uni.navigateTo({
				url: `/views/changuanruzhu/webview/view-yinsi-view?url=https://sanlimessage.fun/venue_agreement`
			})
		}
	}


	const telData = reactive({
		nicheng: '',
		tel: '',
		password: '',
		checkpassword: '',
		ifCheck: false
	})

	const clickCheck = () => {
		telData.ifCheck = !telData.ifCheck
	}

	const regUser = () => {
		console.log('注册数据', telData);
		// 检查是否同意文本
		if (telData.ifCheck == false) {
			uni.showModal({
				title: '注意',
				content: '请认真阅读并同意平台协议'
			})
		}
		// 检查昵称
		else if (telData.nicheng === '') {
			console.log('用户名错误'); // 用户名为空
			uni.showModal({
				title: '注意',
				content: '请输入用户名'
			})

			return;
		}

		// 检查电话
		if (telData.tel === '') {
			console.log('电话错误'); // 电话为空
			uni.showModal({
				title: '注意',
				content: '请输入电话'
			})
			return;

		}

		// 检查密码输入
		if (telData.password === '' || telData.checkpassword === '') {
			console.log('密码输入错误'); // 密码或确认密码为空
			uni.showModal({
				title: '注意',
				content: '请注意密码是否输入'
			})
			return;
		}

		// 检查密码一致性
		if (telData.password !== telData.checkpassword) {
			console.log('两次密码不一致'); // 密码不一致
			uni.showModal({
				title: '注意',
				content: '两次密码不一致'
			})
			return;
		}

		// 调用注册 API
		regUserApi(telData).then((res) => {
			console.log(res); // 处理注册成功后的逻辑
			uni.showModal({
				title:'提示',
				content:res.result
			})
		}).catch((error) => {
			console.error('注册失败:', error); // 处理注册失败的逻辑
		});
	};
</script>

<style scoped lang="scss">
	.top-bar {
		background-color: gainsboro;
	}

	.top-bar-bottom {
		padding: 10px 40px;
		background-color: #5ACAE1;
		color: white;
	}

	.top-content {
		padding: 0 40px;
		display: flex;
		justify-content: space-between;
	}

	.content {
		margin-top: 80px;
		padding: 0 40px;

		.title {
			font-size: 24px;
		}

		.center {
			margin-top: 40px;

			.item {
				padding: 10px 0;
				display: flex;
				font-size: 16px;

				.left {
					margin-right: 20px;
				}
			}

			.p {
				width: 100%;
				height: 1px;
				background-color: gainsboro;
			}
		}

		.bottom {
			margin-top: 20px;

			.login-btn {
				text-align: center;
				color: white;
				border-radius: 10px;
				background-color: lightskyblue;
				padding: 14px 0;
				margin-top: 40px;
			}

			.title2 {
				display: flex;

				.p {
					color: #5ACAE1;
				}
			}
		}
	}
</style>